<template>
  <div class="task-dispatch">
    <el-dialog title="任务调度详情" :visible.sync="isDialog" :before-close="close" top="5vh" width="90%">
      <div class="row">
        <div class="left">
          <!--<el-button class="his-btn" type="text" size="mini" @click="isHistoryManage = true">历史记录管理</el-button>-->
          <el-tabs v-model="todayOrHistory" class="height">
            <el-tab-pane label="今日测试详情" name="today" class="height">
              <history-list :params="{flag: true,taskInvokeId: taskInvokeId}" @rowClickCall="rowClickCall"/>
            </el-tab-pane>
            <el-tab-pane label="历史测试详情" name="history">
              <!--<div class="search-bar">
                <el-date-picker
                  style="width: 350px"
                  size="mini"
                  v-model="time"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间">
                </el-date-picker>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="search">搜索</el-button>
              </div>-->
              <history-list v-if="isHistory" :params="params" @rowClickCall="rowClickCall"/>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="right">
          <div class="right-item">
            <div class="task-char">
              <div class="title">调度监控</div>
              <div class="char-item">
                <jtopo v-if="isDispatch" @clickNodeCall="clickNodeCall" disabled :node-list="dispatch.nodeArr"/>
              </div>
            </div>
            <div class="dispatch-char">
              <div class="title">任务详情</div>
              <div class="char-item">
                <jtopo @clickNodeCall="clickInterfaceNodeCall" v-if="isTask" canvas-id="taskId" disabled :node-list="interfaceNode.nodeArr"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <task-history-manage v-if="isHistoryManage" :dialog="isHistoryManage" :taskInvokeId="taskInvokeId" @closeHistoryBox="closeHistoryBox"/>

    <el-dialog title="接口配置详情" :visible.sync="isConfig" top="50px" width="90%" append-to-body>
      <div style="padding: 15px">
        <interface-config v-if="isConfig" disabled :node="node"/>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import HistoryList from './HistoryList'
  import TaskHistoryManage from './TaskHistoryManage'
  import Jtopo from "../../compoents/Jtopo"
  import InterfaceConfig from "../../taskManage/compoents/InterfaceConfig"

  export default {
    components: {
      HistoryList, TaskHistoryManage, Jtopo, InterfaceConfig
    },
    name: "TaskDispatchDetail",
    props: {
      dialog: {
        type: Boolean,
        required: true
      },
      taskInvokeId: {
        type: String,
        required: true
      },
    },
    data() {
      return {
        isDialog: this.dialog,
        todayOrHistory: "today",
        time: [],
        params: {
          taskInvokeId: this.taskInvokeId,
          flag: false,
          startTime: null,
          endTime: null
        },
        isHistory: true,
        isHistoryManage: false,
        isTask: false,
        isDispatch: false,
        dispatch: {},
        interfaceNode: {},
        node: null,
        isConfig: false
      }
    },
    methods: {
      /** 关闭弹窗**/
      close() {
        this.$emit("closeTaskDispatchDetailCall");
      },
      search() {
        this.params.startTime = this.time[0] || null;
        this.params.endTime = this.time[1] || null;
        this.isHistory = false;
        this.$nextTick(() => {
          this.isHistory = true;
        });

      },
      /**关闭历史管理弹窗**/
      closeHistoryBox(){
        this.isHistoryManage = false
      },
      /**点击接口详情**/
      clickInterfaceNodeCall(node) {
        this.node = node.interfaceNode;
        this.isConfig = false;
        this.$nextTick(() => {
          this.isConfig = true;
        });
      },
      /**点击节点回调**/
      clickNodeCall(data) {
        console.log("dispatch", this.dispatch);
        this.$http.post(`/task/getTaskRecord`, {
          invokeRecordId: this.dispatch.recordId,
          taskId: data.interfaceNode.taskId,
        }).then((rsp) => {
          this.interfaceNode.nodeArr = rsp ? rsp.nodeArr : "";
          this.isTask = false;
          this.$nextTick(() => {
            this.isTask = true;
          });
          if (rsp) {
            let nodeList = JSON.parse(rsp.nodeArr);
            let nodeIds = [];
            nodeList.forEach(item => {
              nodeIds.push(item.nodeId);
            });
            this.$http.post(`/task/historyInterface`, {
              nodeIds: nodeIds,
              taskId: data.interfaceNode.taskId,
              invokeRecordId: this.dispatch.recordId,
              taskRecordId: this.dispatch.taskInvokeId,
            }).then((res) => {
              this.interfaceNode = res;
              let nodeArr = JSON.parse(rsp.nodeArr);
              if (this.interfaceNode.histroys) {
                nodeArr.forEach(item => {
                  this.interfaceNode.histroys.forEach(child => {
                    if (child.nodeId === item.nodeId) {
                      item.interfaceNode.executeStatus = child.status;
                    }
                  });
                });
              }
              this.interfaceNode.nodeArr = JSON.stringify(nodeArr);
              this.isTask = false;
              this.$nextTick(() => {
                this.isTask = true;
              })
            })
          }

        });
      },
      /**单击回调**/
      rowClickCall(item) {
        console.log(item);
        this.dispatch = item;
        this.isTask = false;
        this.isDispatch = false;
        this.$nextTick(() => {
          this.isDispatch = true;
        })
      },
    }
  }
</script>


<style scoped lang="less">
  .row{
    width: 100%;
    height: 800px;
    overflow: hidden;
    display: flex;
    & .left{
      height: 100%;
      width: 500px;
      border-right: 8px solid #e1e1e1;
      box-sizing: border-box;
      padding: 0 15px;
      position: relative;
      .his-btn{
        position: absolute;
        right: 15px;
        z-index: 1;
        top: 5px;
      }
      .search-bar{
        padding-bottom: 15px;
      }
      .height{
        height: 100%;
      }
    }

    .right{
      height: 100%;
      width: calc(100% - 500px);
      box-sizing: border-box;
      position: relative;
      padding: 15px;
      .title{
        color: #333;
        font-weight: 600;
        padding-bottom: 15px;
        box-sizing: border-box;
      }
      .right-item{
        display: flex;
        height: 100%;
        .task-char{
          height: 100%;
          width: calc(50% - 10px);
          .char-item{
            width: 100%;
            height: calc(100% - 40px);
            border:1px solid #dcdfe6;
            border-radius: 4px;
            background: #eee;
          }
        }
        .dispatch-char{
          width: 50%;
          height: 100%;
          margin-left: 10px;
          .char-item{
            width: 100%;
            height: calc(100% - 40px);
            border:1px solid #dcdfe6;
            border-radius: 4px;
            background: #eee;
          }
        }
      }
    }
  }
</style>
